@use 'sass:color';
@use '../Variables.scss';

.row {
  cursor: pointer;
  border-left: solid 0.2em Variables.$light-grey;
  border-bottom: dotted 1px Variables.$light-grey;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
  padding: 0.5em;
  align-items: center;
  .filter {
    display: inline-flex;
    vertical-align: middle;
  }
  .MuiCheckbox-root {
    padding: 0.25em;
  }
  [data-todotxt-attribute="created"],
  [data-todotxt-attribute="completed"],
  [data-todotxt-attribute="hidden"] {
    filter: opacity(50%);
  }
  &[data-complete='true'],
  &[data-hidden='true'] {
    filter: opacity(50%) grayscale(100%);
  }
  &:last-child {
    border-bottom-left-radius: 0.25em;
  }
  &.group {
    padding-left: 0;
    border: none;
    cursor: auto;
  }
}

.compact {
  .row {
    padding: 0.3em;
    [data-todotxt-attribute='due'],
    [data-todotxt-attribute='t'],
    [data-todotxt-attribute='rec'] {
      button {
        padding: 0 0.5em 0 0;
      }

      div {
        padding: 0;
      }
    }
    .filter:not([data-todotxt-attribute='priority']):not([data-todotxt-attribute='t']):not([data-todotxt-attribute='due']):not([data-todotxt-attribute='rec']) {
      button {
        padding: 0.2em 0.4em;
      }
    }
    &.group {
      padding-left: 0;
      button {
        padding: 0.2em 0.4em;
      }      
    }
  }
}

.dark {
  .row {
    border-color: Variables.$dark-grey;
  }
}
